/* 全局样式设置 */
* {
  /* 设置盒模型为 border-box */
  box-sizing: border-box;
  /* 去除外边距 */
  margin: 0;
  /* 去除内边距 */
  padding: 0;
  /* 设置字体 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面主体样式 */
body {
  /* 设置背景颜色 */
  background-color: #f5f7fa;
  /* 设置文字颜色 */
  color: #333;
  /* 设置行高 */
  line-height: 1.6;
  /* 设置内边距 */
  padding: 20px;
  /* 设置背景颜色过渡效果 */
  transition: background-color 0.5s ease;
}

/* 容器样式 */
.container {
  /* 设置最大宽度 */
  max-width: 600px;
  /* 水平居中 */
  margin: 0 auto;
  /* 设置背景颜色 */
  background: white;
  /* 设置内边距 */
  padding: 30px;
  /* 设置圆角 */
  border-radius: 15px;
  /* 设置阴影 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 头部样式 */
header {
  /* 文本居中 */
  text-align: center;
  /* 设置底部外边距 */
  margin-bottom: 30px;
}

/* 头部标题样式 */
header h1 {
  /* 设置文字颜色 */
  color: #e74c3c;
  /* 设置字体大小 */
  font-size: 2.2rem;
}

/* 番茄钟容器样式 */
.pomodoro-container {
  /* 设置背景颜色 */
  background: #fff;
  /* 设置内边距 */
  padding: 20px;
  /* 设置圆角 */
  border-radius: 10px;
  /* 设置阴影 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  /* 设置底部外边距 */
  margin-bottom: 30px;
  /* 文本居中 */
  text-align: center;
}

/* 计时器显示样式 */
.timer-display {
  /* 绝对定位 */
  position: absolute;
  /* 垂直居中 */
  top: 50%;
  /* 水平居中 */
  left: 50%;
  /* 调整位置 */
  transform: translate(-50%, -50%);
  /* 设置字体大小 */
  font-size: 3rem;
  /* 设置文字颜色 */
  color: #2c3e50;
  /* 设置字体 */
  font-family: 'Courier New', monospace;
}

/* 计时器控制按钮容器样式 */
.timer-controls {
  /* 弹性布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 设置元素间距 */
  gap: 15px;
  /* 设置底部外边距 */
  margin-bottom: 20px;
}

/* 按钮样式 */
button {
  /* 设置内边距 */
  padding: 10px 20px;
  /* 去除边框 */
  border: none;
  /* 设置圆角 */
  border-radius: 5px;
  /* 设置背景颜色 */
  background-color: #3498db;
  /* 设置文字颜色 */
  color: white;
  /* 设置字体大小 */
  font-size: 1rem;
  /* 设置鼠标指针样式 */
  cursor: pointer;
  /* 设置过渡效果 */
  transition: all 0.3s;
}

/* 按钮悬停样式 */
button:hover {
  /* 设置透明度 */
  opacity: 0.9;
  /* 向上移动 */
  transform: translateY(-2px);
}

/* 禁用按钮样式 */
button:disabled {
  /* 设置背景颜色 */
  background-color: #95a5a6;
  /* 设置鼠标指针样式 */
  cursor: not-allowed;
  /* 取消移动效果 */
  transform: none;
}

/* 模式选择器样式 */
.mode-selector {
  /* 弹性布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 设置元素间距 */
  gap: 10px;
  /* 允许换行 */
  flex-wrap: wrap;
}

/* 模式按钮样式 */
.mode-btn {
  /* 设置背景颜色 */
  background-color: #ecf0f1;
  /* 设置文字颜色 */
  color: #2c3e50;
  /* 设置内边距 */
  padding: 8px 15px;
  /* 设置字体大小 */
  font-size: 0.9rem;
}

/* 激活模式按钮样式 */
.mode-btn.active {
  /* 设置背景颜色 */
  background-color: #e74c3c;
  /* 设置文字颜色 */
  color: white;
}

/* 任务容器样式 */
.task-container {
  /* 设置背景颜色 */
  background: #fff;
  /* 设置内边距 */
  padding: 20px;
  /* 设置圆角 */
  border-radius: 10px;
  /* 设置阴影 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* 任务输入框容器样式 */
.task-input {
  /* 弹性布局 */
  display: flex;
  /* 设置元素间距 */
  gap: 10px;
  /* 设置底部外边距 */
  margin-bottom: 20px;
}

/* 任务输入框样式 */
.task-input input {
  /* 弹性增长 */
  flex: 1;
  /* 设置内边距 */
  padding: 10px;
  /* 设置边框 */
  border: 1px solid #ddd;
  /* 设置圆角 */
  border-radius: 5px;
  /* 设置字体大小 */
  font-size: 1rem;
}

/* 任务列表样式 */
#task-list {
  /* 去除列表样式 */
  list-style: none;
  /* 设置底部外边距 */
  margin-bottom: 20px;
}

/* 任务项样式 */
.task-item {
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 设置内边距 */
  padding: 12px 15px;
  /* 设置背景颜色 */
  background: #f9f9f9;
  /* 设置圆角 */
  border-radius: 5px;
  /* 设置底部外边距 */
  margin-bottom: 10px;
  /* 设置过渡效果 */
  transition: all 0.3s;
}

/* 任务项悬停样式 */
.task-item:hover {
  /* 设置背景颜色 */
  background: #f0f0f0;
  /* 向右移动 */
  transform: translateX(5px);
}

/* 已完成任务项样式 */
.task-item.completed {
  /* 应用动画 */
  animation: taskComplete 0.5s ease;
  /* 设置背景渐变 */
  background: linear-gradient(to right, #e8f8f5, #d5f5e3);
}

/* 任务复选框样式 */
.task-checkbox {
  /* 设置右边外边距 */
  margin-right: 15px;
  /* 放大复选框 */
  transform: scale(1.3);
}

/* 任务文本样式 */
.task-text {
  /* 弹性增长 */
  flex: 1;
}

/* 已完成任务文本样式 */
.task-text.completed {
  /* 添加删除线 */
  text-decoration: line-through;
  /* 设置文字颜色 */
  color: #7f8c8d;
}

/* 删除任务按钮样式 */
.delete-task {
  /* 去除背景 */
  background: none;
  /* 去除边框 */
  border: none;
  /* 设置文字颜色 */
  color: #e74c3c;
  /* 设置字体大小 */
  font-size: 1.2rem;
  /* 设置鼠标指针样式 */
  cursor: pointer;
  /* 设置内边距 */
  padding: 5px;
}

/* 任务统计信息样式 */
.task-stats {
  /* 弹性布局 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 设置字体大小 */
  font-size: 0.9rem;
  /* 设置文字颜色 */
  color: #7f8c8d;
}

/* 进度环样式 */
.progress-ring {
  /* 相对定位 */
  position: relative;
  /* 设置宽度 */
  width: 200px;
  /* 设置高度 */
  height: 200px;
  /* 水平居中 */
  margin: 20px auto;
}

/* 进度圆样式 */
.progress-circle {
  /* 旋转 */
  transform: rotate(-90deg);
  /* 设置旋转中心 */
  transform-origin: 50% 50%;
  /* 设置过渡效果 */
  transition: stroke-dashoffset 1s linear;
}

/* 任务完成动画 */
@keyframes taskComplete {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4); }
  100% { transform: scale(1); }
}

/* 工作模式背景颜色 */
.work-mode {
  background-color: #f5f7fa;
}

/* 短休息模式背景颜色 */
.short-break-mode {
  background-color: #e8f8f5;
}

/* 长休息模式背景颜色 */
.long-break-mode {
  background-color: #f5eef8;
}

/* 统计图表样式 */
.stats-chart {
  /* 设置高度 */
  height: 200px;
  /* 设置顶部外边距 */
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 500px) {
  .container {
    /* 设置内边距 */
    padding: 15px;
  }
  
  .timer-display {
    /* 设置字体大小 */
    font-size: 3.5rem;
  }
  
  .mode-selector {
    /* 垂直布局 */
    flex-direction: column;
  }
}